// 欢迎弹窗控制
document.addEventListener('DOMContentLoaded', function() {
    const welcomePopup = document.querySelector('.welcome-popup');
    const startButton = document.querySelector('.start-button');
    const container = document.querySelector('.container');
    
    // 初始隐藏主内容
    container.style.opacity = '0';
    container.style.transition = 'opacity 1s ease';
    
    // 点击开始按钮
    startButton.addEventListener('click', function() {
        welcomePopup.style.animation = 'fadeOut 0.5s ease forwards';
        setTimeout(() => {
            welcomePopup.style.display = 'none';
            container.style.opacity = '1';
            // 开始播放背景音乐
            const bgMusic = document.getElementById('bgMusic');
            bgMusic.play();
        }, 500);
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.floating-hearts');
    
    function createHeart() {
        const heart = document.createElement('div');
        heart.innerHTML = '❤️';
        heart.style.position = 'absolute';
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.top = '100vh';
        heart.style.fontSize = Math.random() * 20 + 10 + 'px';
        heart.style.opacity = Math.random() * 0.5 + 0.5;
        heart.style.animation = `float ${Math.random() * 3 + 2}s linear forwards`;
        container.appendChild(heart);
        
        setTimeout(() => {
            heart.remove();
        }, 5000);
    }
    
    setInterval(createHeart, 300);
    
    // 添加鼠标移动效果
    document.addEventListener('mousemove', (e) => {
        const hearts = document.querySelectorAll('.floating-hearts div');
        hearts.forEach(heart => {
            const x = e.clientX;
            const y = e.clientY;
            const heartX = parseFloat(heart.style.left);
            const heartY = parseFloat(heart.style.top);
            
            const deltaX = (x - heartX) * 0.01;
            const deltaY = (y - heartY) * 0.01;
            
            heart.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
        });
    });

    // 音乐控制
    const musicToggle = document.getElementById('musicToggle');
    const bgMusic = document.getElementById('bgMusic');
    let isMusicPlaying = false;

    musicToggle.addEventListener('click', () => {
        if (isMusicPlaying) {
            bgMusic.pause();
            musicToggle.textContent = '🎵';
        } else {
            bgMusic.play();
            musicToggle.textContent = '🔊';
        }
        isMusicPlaying = !isMusicPlaying;
    });

    // 照片点击效果
    const photoFrames = document.querySelectorAll('.photo-frame');
    photoFrames.forEach(frame => {
        frame.addEventListener('click', function() {
            const memory = this.getAttribute('data-memory');
            
            // 创建弹窗
            const popup = document.createElement('div');
            popup.className = 'memory-popup';
            popup.style.display = 'flex';
            
            // 创建弹窗内容
            const content = document.createElement('div');
            content.className = 'popup-content';
            content.innerHTML = `
                <h3>${memory}</h3>
                <p>这是我们美好的回忆...</p>
                <div class="popup-buttons">
                    <button class="close-popup">关闭</button>
                </div>
            `;
            
            // 添加到页面
            popup.appendChild(content);
            document.body.appendChild(popup);
            
            // 添加关闭事件
            const closeBtn = content.querySelector('.close-popup');
            closeBtn.addEventListener('click', () => {
                document.body.removeChild(popup);
            });
            
            // 点击外部关闭
            popup.addEventListener('click', (e) => {
                if (e.target === popup) {
                    document.body.removeChild(popup);
                }
            });
        });
    });

    // 恋爱计时器
    const startDate = new Date('2024-02-14'); // 修改为情人节
    const counter = document.getElementById('loveCounter');
    
    function updateCounter() {
        const now = new Date();
        const diff = now - startDate;
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        counter.textContent = days;
        
        // 添加特殊日子的提示
        if (days % 100 === 0) {
            showSpecialMessage(`我们已经在一起${days}天啦！`);
        }
    }
    
    function showSpecialMessage(message) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'special-message';
        messageDiv.textContent = message;
        document.body.appendChild(messageDiv);
        
        setTimeout(() => {
            messageDiv.remove();
        }, 3000);
    }
    
    updateCounter();
    setInterval(updateCounter, 1000);

    // 添加打字机效果
    const heartText = document.querySelector('.heart-text');
    const originalText = heartText.textContent;
    heartText.textContent = '';
    let i = 0;
    
    function typeWriter() {
        if (i < originalText.length) {
            heartText.textContent += originalText.charAt(i);
            i++;
            setTimeout(typeWriter, 100);
        }
    }
    
    setTimeout(typeWriter, 1000);
});

// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
    @keyframes float {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-100vh) rotate(360deg);
            opacity: 0;
        }
    }

    .memory-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        animation: fadeIn 0.3s ease;
    }

    .memory-popup.fade-out {
        animation: fadeOut 0.3s ease forwards;
    }

    .popup-content {
        background: white;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        animation: scaleIn 0.3s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        max-width: 80%;
        width: 400px;
    }

    .popup-content h3 {
        color: #ff6b6b;
        margin-bottom: 15px;
        font-size: 1.5em;
    }

    .popup-content p {
        color: #666;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .popup-buttons {
        margin-top: 20px;
    }

    .close-popup {
        background: #ff6b6b;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 1em;
        transition: transform 0.2s ease;
    }

    .close-popup:hover {
        transform: scale(1.05);
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes scaleIn {
        from { transform: scale(0.8); }
        to { transform: scale(1); }
    }
`;
document.head.appendChild(style); 